Alinhando um elemento bloco dentro de outro elemento bloco

Como sabemos o estilo de exibição dos boxes dos elementos pelo browser é static e é como empilhar caixas de cima para baixo e da esquerda para a direita. Este é o default do browser (além de display:block, boxsizing:borderbox).

No exemplo 1 vamos colocar uma div dentro da outra fica assim:
        .classe1{
            height:200px;
            width:200px;
            background-color:lightgreen;
        }

        .classe2{
            height:100px;
            width:100px;
            background-color:lightblue;
        }

        <div class="classe1">
            DIV1
            <div class="classe2">Div2</div>
        </div>

Como o browser exibe:

Podemos ver que a DIV2 esta dentro do espaço da DIV1 e seu posicionamento foi à esquerda logo depois da mensagem DIV1. Se não houvesse a mensagem os cantos superiores esquerdo seriam no mesmo ponto.

---

Adicionando position:relative a primeira div não muda o position-static pois o position-relative apenas desloca do position-static de um valor mas como não definimos ainda ele é zero e a posição continua a mesma.
Podemos colocar position absolute no segundo div mais interno que nada ainda é modificado no posicionamento.
Contudo fixando a relação entre a div interna e a div externa temos o seguinte resultado:


Importante : Ao colocarmos na CSS o top de 50% não significa que nosso elemento vai ficar no centro mas sim que vai começar a ser renderizado a 50% do elemento pai. Isto não obrigatoriamente coloca nosso objeto interno no centro especialmente se ele for grande. E isso vale tanto para o top, bottom, left e right
Portanto, ainda não esta no centro.

Agora na div interna precisamos definir que ela vá 50% para cima e 50% para esquerda do tamanho da div interna e ai a div interna estará no centro. Isto é feito pelo estilo transform:translate(-50%,-50%).

---

Posicionando elementos na página

Podemos dizer que o padrão do browser segue o padrão ocidental de leitura e escrita, ou seja, da esquerda para a direita e de cima para baixo, mesmos em paises árabes, japão ou que não são ocidentais.

Vale mencionar que o tamanho da janela que o browser esta sendo exibido influencia no posicionamento do item. Dependendo da tag que estamos exibindo o documento html poderá ter sua largura aumentada para caber o item ou, dependendo do item, ele será renderizado na linha a seguir.
Se você utiliza um bootstrap ou deseja que um celular abra sua página corretamente, sugiro que dimensione o browser do tamanho que o celular irá exibir seu documento. Muita vez um design maravilhoso num computador fica horrivel no celular e vice-versa. Contudo, HTML não é simples texto.
Genéricamente, podemos que o browser exibe os elementos da seguinte maneira:

---

Posicionamento de elementos tipo bloco na página

Mencionarei o modo default que o browser exibe um elmento tipo bloco.
Este é o modelo mais simples de posicionamento. Se o elemento for o primeiro da linha corrente ele será exibido e o que restar da linha será deixada sem uso.

Exemplo:
A seguir exibirei uma div: <div style="border:1px solid red">Texto dentro da div</div> Texto fora da div.

Como é exibido:
A seguir exibirei uma div: Texto fora da div.

Coloquei uma borda vermelha só para destacar todo o espaço ocupado pela tag.
Podemos notar que apesar de haver espaço na linha corrente (após o texto 'A seguir exibirei uma div:') para exibir a div o browser foi para a linha de baixo.
Como eu disse, ao exibir um elemento block, se for o primeiro elemento da linha, é exibido na linha corrente e se não for é exibido no começo da linha seguinte.
Outra coisa é que o texto foi exibido e sobrou muito espaço a direita...o browser dimensionou o objeto para que ocupasse até o final da linha, digamos que deu um height automatico de 100% para o elemento.
Note que o texto 'Texto fora da div' caberia muito bem à direita da div mas pela definição do elemento bloco, que ocupa a linha inteira, ele foi renderizado no começo da linha a seguir.
Resumindo, toda tag tipo bloco será exibida com esse critério default do browser.

---

Posicionamento de elementos tipo em linha na página

Mencionarei o modo default que o browser exibe um elmento tipo em linha.
Este é o modelo parece o mais simples de posicionamento mas é o mais complexo. Ao renderizar este elemento o browser sempre fará de tudo para exibir um ao lado do outro, na mesma linha.

Exemplo:
A seguir exibirei o span 1: <span style="border:1px solid red">Texto1 dentro do span1</span>Texto2 fora do span. e em seguida exibirei o span 2: <span style="border:1px solid red">Texto3 dentro do span2</span>Texto4 fora do span.

Como é exibido:
A seguir exibirei o span 1: Texto1 dentro do span1Texto2 fora do span. e em seguida exibirei o span 2: Texto3 dentro do span2Texto4 fora do span.

Como pode notar o span1 foi foi renderizado logo depois e na mesma linha do texto 'A seguir exibirei o span 1:' e o mesmo ocorreu com span2.
Portanto, se existe espaço na linha corrente o browser irá renderizar o elemento na linha corrente. Senão houver, o elemento será renderizado na linha a seguir. Note que não é se 'todo elemento' não couber na linha corrente ele coloca 'todo elemento' na linha seguinte, ele coloca o que der na linha atual e o que sobrar na linha a seguir.

Importante : Redimensione a janela do browser e veja o que ocorre com o span1 e span2.
Eles serão automaticamente redimensionados pelo tamanho da janela do browser.
Chamamos isso de design responsivo, ou seja, ele se adequa ao tamanho da janela do browser e ocorre tanto em celulares como em computadores.

---

Problemas com o posicionamento de elementos tipo em linha na página

Tem certos tipos de leioute que fica estranho nos elementos em linha.
Vou exibir um exemplo, o cabeçalho e o texto de uma notícia...O cabeçalho destacado, isolado, bem maior e o texto da noticia normal bem comum.

Exemplo:
<span style="border:1px solid red;font-size:25px;padding:30px;background-color:antiquewhite;">Cabeçalho Notícia</span>
        Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.
        Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.
        Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.


Como é exibido:
Cabeçalho Notícia Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.

Notou que ficou bem errado...no chrome e no Edge ficou assim:


Em cima do cabeçalho da notícia tem a mensagem 'Como é exibido:' que foi sobrescrita pelo cabeçalho da notícia.

Agora vamos acrescentar um margin no elemento span de 30 px.

Exemplo:
<span style="border:1px solid red;font-size:25px;padding:30px;background-color:antiquewhite;margin:30px;">Cabeçalho Notícia</span>
        Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.
        Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.
        Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.


Como é exibido:
Cabeçalho Notícia Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.

Em cima do cabeçalho da notícia a mensagem 'Como é exibido:' foi praticamente sobrescrita pelo cabeçalho da notícia novamente.
Note que a margem foi aplicada no começo da exibição do texto da mensagem mas quando não coube na linha o browser exibiu na linha abaixo sem qualquer preocupação com o cabeçalho.

Utilizando html no seu estilo puro, padrão do browser, não há como resolver esse problema. É pra isso que existe a CSS, para alterar o estilo padrão que o browser usa.
Precisamos de outro 'estilo' que faça o elemento span se parecer com o block para podermos aplicar largura e altura do elemento e ao mesmo tempo que se comporte como inline para que o texto da notícia seja exibido a sua direita.

Para mais detalhes sobre o posicionamento dos objetos no documento html veja nesta seção (CSS) as páginas.
02-Elementos Flutuantes 1.html.
02-Elementos Flutuantes 2.html.
04-Position Static Relative Absolute 1.html.
04-Position Static Relative Absolute 2.html.
05-Position-Absolute.html.
09-Alterando Estilo Inline para Block.html.
12-ElementosTipoBlock.html.
13-ElementosTipoInLine.html.
14-ExemploPositionAbsolute.html.
20-Alinhando elemento bloco dentro de outro elemento bloco.html.
24-Display.html.

---

Vamos continuar com a nossa briga para exibir a noticia decentemente na página web...
Note que o cabeçalho da noticia fica à esquerda da página e o texto fica 'flutuando' à sua direita. Portanto, o único estilo que permite o efeito desejado é o float.

Exemplo:
        <span style="border: 1px solid red; font-size: 25px; padding: 30px; background-color:antiquewhite;margin:30px;float:left;">Cabeçalho Notícia</span>
        Texto da Noticia muito longo
        <br /><br />


Como é exibido:
Cabeçalho Notícia Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.

Ficou perfeito, era isso que eu queria.

Cabeçalho Notícia Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia. Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.Texto da Noticia.